
<!-- CSS3 对盒模型做出了新的定义，即允许开发人员指定盒子宽度和高度的计算方式。
 外加模式：（css的默认方式）
 	box-sizing: content-box;
解释：此时设置的 width 和 height 是内容区域的宽高。盒子的实际宽度 = 设置的 width + padding + border。此时改变 padding 和 border 的大小，也不会改变内容的宽高，而是盒子的总宽高发生变化。
内减模式：【需要注意】
    box-sizing: border-box;
解释：此时设置的 width 和 height 是盒子的总宽高。盒子的实际宽度 = 设置的 width。此时改变 padding 和 border 的大小，会改变内容的宽高，盒子的总宽高不变。

 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .box {
            width: 500px;
            height: 200px;
            margin: 20px auto;
            border: 2px solid red;
/*             
            此时，我们可以为浏览器添加不同的私有前缀，属性就可以生效了。

            格式如下：

                -webkit-: 谷歌 苹果
                -moz-:火狐
                -ms-：IE
                -o-：欧朋 */
                background: -webkit-linear-gradient(left, green, yellow);

              
            
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>